<template>
  <transition name="drawer">
    <div class="drawer-container" v-if="visible">
      <div class="drawer-mask" @click="handleClose"></div>
      <div 
        class="drawer-content" 
        :class="[placement]"
        :style="contentStyle"
      >
        <!-- 标题栏 -->
        <div class="drawer-header" v-if="showHeader">
          <div class="drawer-title">
            <slot name="title">{{ title }}</slot>
          </div>
          <button class="close-btn" v-if="showClose" @click="handleClose">
            <slot name="close-icon">
              <i class="fas fa-times"></i>
            </slot>
          </button>
        </div>
        
        <!-- 内容区 -->
        <div class="drawer-body" :style="bodyStyle">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Drawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'right',
      validator: value => ['left', 'right'].includes(value)
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    width: {
      type: [String, Number],
      default: '80%'
    },
    height: {
      type: [String, Number],
      default: '100%'
    },
    bodyPadding: {
      type: [String, Number],
      default: '$spacing-md'
    }
  },
  computed: {
    contentStyle() {
      return {
        width: typeof this.width === 'number' ? `${this.width}px` : this.width,
        height: typeof this.height === 'number' ? `${this.height}px` : this.height
      }
    },
    bodyStyle() {
      return {
        padding: typeof this.bodyPadding === 'number' 
          ? `${this.bodyPadding}px` 
          : this.bodyPadding
      }
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        if (val) {
          this.disableScroll()
        } else {
          this.enableScroll()
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    disableScroll() {
      document.body.style.overflow = 'hidden'
      document.body.style.paddingRight = this.getScrollbarWidth() + 'px'
    },
    enableScroll() {
      document.body.style.overflow = ''
      document.body.style.paddingRight = ''
    },
    getScrollbarWidth() {
      const outer = document.createElement('div')
      outer.style.visibility = 'hidden'
      outer.style.overflow = 'scroll'
      document.body.appendChild(outer)

      const inner = document.createElement('div')
      outer.appendChild(inner)

      const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
      outer.parentNode.removeChild(outer)

      return scrollbarWidth
    }
  },
  beforeDestroy() {
    // 组件销毁时确保恢复滚动
    this.enableScroll()
  }
}
</script>

<style lang="scss" scoped>
.drawer-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
}

.drawer-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.drawer-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: v-bind(width);
  max-width: 360px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  
  &.right {
    right: 0;
  }
  
  &.left {
    left: 0;
  }
}

// 过渡效果
.drawer-enter-active,
.drawer-leave-active {
  transition: all 0.3s ease-out;
}

.drawer-enter-from,
.drawer-leave-to {
  opacity: 0;
  
  .drawer-content {
    &.right {
      transform: translateX(100%);
    }
    
    &.left {
      transform: translateX(-100%);
    }
  }
}

.drawer-enter-to,
.drawer-leave-from {
  opacity: 1;
  
  .drawer-content {
    transform: translateX(0);
  }
}

.drawer-header {
  padding: $spacing-md;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .drawer-title {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    margin-right: $spacing-md;
  }
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: $spacing-md;
}

.close-btn {
  background: none;
  border: none;
  padding: $spacing-sm;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    color: $primary;
  }
}

// 深色模式适配
:root[data-theme='dark'] {
  .drawer-content {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  }
}
</style> 